import React, { useState, useEffect } from 'react';
import { Card, Typography, Space, Progress, Row, Col, Statistic, Badge, Divider, Tooltip } from 'antd';
import { 
  RadarChartOutlined, 
  ThunderboltOutlined, 
  DatabaseOutlined, 
  CloudServerOutlined,
  GlobalOutlined,
  SafetyOutlined,
  RocketOutlined,
  HeartOutlined,
  FireOutlined,
  EyeOutlined,
  AlertOutlined
} from '@ant-design/icons';

const { Title, Text } = Typography;

interface SystemMetricsRadarProps {
  loading?: boolean;
}

const SystemMetricsRadar: React.FC<SystemMetricsRadarProps> = ({ loading = false }) => {
  const [realTimeData, setRealTimeData] = useState(false);

  // 扩展的系统指标数据
  const metrics = [
    { 
      name: 'CPU使用率', 
      value: 68, 
      color: '#ff4d4f', 
      icon: <ThunderboltOutlined />,
      description: '处理器负载情况',
      trend: '+5%',
      threshold: { warning: 70, critical: 85 }
    },
    { 
      name: '内存使用率', 
      value: 75, 
      color: '#faad14', 
      icon: <DatabaseOutlined />,
      description: '内存占用情况',
      trend: '+12%',
      threshold: { warning: 80, critical: 90 }
    },
    { 
      name: '磁盘使用率', 
      value: 45, 
      color: '#52c41a', 
      icon: <CloudServerOutlined />,
      description: '存储空间占用',
      trend: '+3%',
      threshold: { warning: 75, critical: 90 }
    },
    { 
      name: '网络带宽', 
      value: 82, 
      color: '#1890ff', 
      icon: <GlobalOutlined />,
      description: '网络流量使用',
      trend: '+18%',
      threshold: { warning: 80, critical: 95 }
    },
    { 
      name: '响应时间', 
      value: 90, 
      color: '#722ed1', 
      icon: <RocketOutlined />,
      description: 'API平均响应时间',
      trend: '-8%',
      threshold: { warning: 85, critical: 95 }
    },
    { 
      name: '并发连接', 
      value: 65, 
      color: '#13c2c2', 
      icon: <EyeOutlined />,
      description: '当前活跃连接数',
      trend: '+25%',
      threshold: { warning: 75, critical: 90 }
    },
    {
      name: '系统安全性',
      value: 88,
      color: '#52c41a',
      icon: <SafetyOutlined />,
      description: '安全防护等级',
      trend: '+2%',
      threshold: { warning: 70, critical: 50 }
    },
    {
      name: '服务健康度',
      value: 95,
      color: '#52c41a',
      icon: <HeartOutlined />,
      description: '服务运行状态',
      trend: '+1%',
      threshold: { warning: 80, critical: 60 }
    }
  ];

  // 实时数据更新
  useEffect(() => {
    if (realTimeData) {
      const interval = setInterval(() => {
        // 模拟实时数据更新
        console.log('实时数据更新');
      }, 5000);
      return () => clearInterval(interval);
    }
  }, [realTimeData]);

  const getStatusColor = (value: number, thresholds?: { warning: number; critical: number }) => {
    if (!thresholds) {
      if (value >= 80) return '#ff4d4f';
      if (value >= 60) return '#faad14';
      return '#52c41a';
    }
    
    if (value >= thresholds.critical) return '#ff4d4f';
    if (value >= thresholds.warning) return '#faad14';
    return '#52c41a';
  };

  const getStatusText = (value: number, thresholds?: { warning: number; critical: number }) => {
    if (!thresholds) {
      if (value >= 80) return '高';
      if (value >= 60) return '中';
      return '低';
    }
    
    if (value >= thresholds.critical) return '严重';
    if (value >= thresholds.warning) return '警告';
    return '正常';
  };

  const getStatusBadge = (value: number, thresholds?: { warning: number; critical: number }) => {
    const status = getStatusText(value, thresholds);
    const color = getStatusColor(value, thresholds);
    
    return (
      <Badge 
        color={color} 
        text={
          <Text style={{ 
            fontSize: 10, 
            color: color,
            fontWeight: 600
          }}>
            {status}
          </Text>
        } 
      />
    );
  };

  return (
    <Card
      loading={loading}
      title={
        <Space>
          <RadarChartOutlined style={{ color: '#722ed1' }} />
          <span>系统性能指标</span>
          <Badge 
            count={metrics.filter(m => m.value >= (m.threshold?.warning || 70)).length} 
            style={{ backgroundColor: '#faad14' }} 
          />
        </Space>
      }
      extra={
        <Space>
          <Tooltip title="实时数据更新">
            <Badge 
              status={realTimeData ? "processing" : "default"} 
              text={realTimeData ? "实时" : "静态"} 
            />
          </Tooltip>
        </Space>
      }
      style={{ height: '100%' }}
    >
      {/* 系统概览统计 */}
      <Row gutter={16} style={{ marginBottom: 20 }}>
        <Col span={6}>
          <Statistic
            title="系统负载"
            value={metrics.find(m => m.name === 'CPU使用率')?.value || 0}
            suffix="%"
            valueStyle={{ 
              color: getStatusColor(metrics.find(m => m.name === 'CPU使用率')?.value || 0),
              fontSize: 16
            }}
            prefix={<ThunderboltOutlined />}
          />
        </Col>
        <Col span={6}>
          <Statistic
            title="内存占用"
            value={metrics.find(m => m.name === '内存使用率')?.value || 0}
            suffix="%"
            valueStyle={{ 
              color: getStatusColor(metrics.find(m => m.name === '内存使用率')?.value || 0),
              fontSize: 16
            }}
            prefix={<DatabaseOutlined />}
          />
        </Col>
        <Col span={6}>
          <Statistic
            title="网络流量"
            value={metrics.find(m => m.name === '网络带宽')?.value || 0}
            suffix="%"
            valueStyle={{ 
              color: getStatusColor(metrics.find(m => m.name === '网络带宽')?.value || 0),
              fontSize: 16
            }}
            prefix={<GlobalOutlined />}
          />
        </Col>
        <Col span={6}>
          <Statistic
            title="响应性能"
            value={metrics.find(m => m.name === '响应时间')?.value || 0}
            suffix="%"
            valueStyle={{ 
              color: getStatusColor(metrics.find(m => m.name === '响应时间')?.value || 0),
              fontSize: 16
            }}
            prefix={<RocketOutlined />}
          />
        </Col>
      </Row>

      <Divider style={{ margin: '16px 0' }} />

      <div style={{ marginBottom: 20 }}>
        <Title level={4} style={{ margin: 0, color: '#262626' }}>
          <Space>
            <HeartOutlined style={{ color: '#52c41a' }} />
            详细指标监控
          </Space>
        </Title>
        <Text type="secondary">实时监控系统各项性能指标</Text>
      </div>

      {/* 详细指标列表 */}
      <div style={{ 
        display: 'flex', 
        flexDirection: 'column', 
        gap: 16,
        maxHeight: 400,
        overflowY: 'auto'
      }}>
        {metrics.map((metric, index) => (
          <Card 
            key={index} 
            size="small" 
            style={{ 
              borderRadius: 8,
              border: `1px solid ${getStatusColor(metric.value, metric.threshold)}20`,
              backgroundColor: `${getStatusColor(metric.value, metric.threshold)}05`
            }}
          >
            <Row align="middle" gutter={16}>
              <Col span={2}>
                <div style={{ 
                  fontSize: 18, 
                  color: getStatusColor(metric.value, metric.threshold),
                  textAlign: 'center'
                }}>
                  {metric.icon}
                </div>
              </Col>
              <Col span={6}>
                <div>
                  <Text style={{ fontSize: 13, fontWeight: 600 }}>{metric.name}</Text>
                  <br />
                  <Text style={{ fontSize: 11, color: '#8c8c8c' }}>{metric.description}</Text>
                </div>
              </Col>
              <Col span={8}>
                <Progress
                  percent={metric.value}
                  size="small"
                  strokeColor={getStatusColor(metric.value, metric.threshold)}
                  showInfo={false}
                  style={{ margin: 0 }}
                />
              </Col>
              <Col span={3} style={{ textAlign: 'center' }}>
                <Text style={{ 
                  fontSize: 14, 
                  fontWeight: 600,
                  color: getStatusColor(metric.value, metric.threshold)
                }}>
                  {metric.value}%
                </Text>
              </Col>
              <Col span={2} style={{ textAlign: 'center' }}>
                {getStatusBadge(metric.value, metric.threshold)}
              </Col>
              <Col span={3} style={{ textAlign: 'right' }}>
                <Tooltip title="相比上期变化">
                  <Text style={{ 
                    fontSize: 11, 
                    color: metric.trend.startsWith('+') ? '#52c41a' : '#ff4d4f',
                    fontWeight: 600
                  }}>
                    {metric.trend}
                  </Text>
                </Tooltip>
              </Col>
            </Row>
          </Card>
        ))}
      </div>

      {/* 总体评分 */}
      <div style={{ 
        marginTop: 20, 
        padding: 16, 
        backgroundColor: '#fafafa', 
        borderRadius: 8,
        textAlign: 'center'
      }}>
        <div style={{ marginBottom: 8 }}>
          <Text style={{ fontSize: 12, color: '#8c8c8c' }}>系统综合评分</Text>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
          <Title level={2} style={{ 
            margin: 0, 
            color: getStatusColor(Math.round(metrics.reduce((sum, m) => sum + m.value, 0) / metrics.length))
          }}>
            {Math.round(metrics.reduce((sum, m) => sum + m.value, 0) / metrics.length)}
          </Title>
          <Text style={{ fontSize: 14, color: '#8c8c8c' }}>/ 100</Text>
        </div>
      </div>

      {/* 系统总体评分 */}
      <Divider style={{ margin: '16px 0' }} />
      
      <Row gutter={16}>
        <Col span={12}>
          <Card size="small" style={{ textAlign: 'center', backgroundColor: '#f6ffed' }}>
            <Statistic
              title="系统健康度评分"
              value={Math.round(metrics.reduce((acc, m) => acc + (100 - m.value), 0) / metrics.length)}
              suffix="/100"
              valueStyle={{ color: '#52c41a', fontSize: 20 }}
              prefix={<HeartOutlined />}
            />
            <Text style={{ fontSize: 11, color: '#8c8c8c' }}>
              基于 {metrics.length} 项指标综合评估
            </Text>
          </Card>
        </Col>
        <Col span={12}>
          <Card size="small" style={{ textAlign: 'center', backgroundColor: '#fff7e6' }}>
            <Statistic
              title="告警指标数量"
              value={metrics.filter(m => m.value >= (m.threshold?.warning || 70)).length}
              suffix={`/${metrics.length}`}
              valueStyle={{ 
                color: metrics.filter(m => m.value >= (m.threshold?.warning || 70)).length > 0 ? '#faad14' : '#52c41a',
                fontSize: 20 
              }}
              prefix={<AlertOutlined />}
            />
            <Text style={{ fontSize: 11, color: '#8c8c8c' }}>
              需要关注的性能指标
            </Text>
          </Card>
        </Col>
      </Row>
    </Card>
  );
};

export default SystemMetricsRadar;